<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Fab 悬浮操作按钮组"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-fab>
        <hips-fab-item
          icon="home"
          bg-color="red"
          @on-click="handleItemClick1"
        />
        <hips-fab-item
          icon="delete"
          bg-color="blue"
          @on-click="handleItemClick2"
        />
        <hips-fab-item
          icon="info-o"
          bg-color="red"
          @on-click="handleItemClick3"
        />
        <hips-fab-item
          icon="question"
          bg-color="blue"
          @on-click="handleItemClick4"
        />
        <hips-fab-item
          icon="location"
          bg-color="red"
          @on-click="handleItemClick5"
        />
        <hips-fab-item
          bg-color="blue"
          @on-click="handleItemClick6"
        >
          <img
            src="@/assets/logo.png"
            class="custom-image"
          >
        </hips-fab-item>
      </hips-fab>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Fab,FabItem } from '@hips/vue-ui';

export default {
  components: {
    [Fab.name]: Fab,
    [FabItem.name]: FabItem,
  },
  mixins: [ BasicView ],
  data () {
    return {}
  },
  methods: {
    handleItemClick1 () {
      console.log(`handleItemClick1`)
      this.$hips.toast(`click home`)
    },
    handleItemClick2 () {
      console.log(`handleItemClick2`)
      this.$hips.toast(`click delete`)
    },
    handleItemClick3 () {
      console.log(`handleItemClick3`)
      this.$hips.toast(`click info`)
    },
    handleItemClick4 () {
      console.log(`handleItemClick4`)
      this.$hips.toast(`click question`)
    },
    handleItemClick5 () {
      console.log(`handleItemClick5`)
      this.$hips.toast(`click location`)
    },
    handleItemClick6 () {
      console.log(`handleItemClick6`)
      this.$hips.toast(`click custom button`)
    },
  },
}
</script>

<style>
  .custom-image{
    width: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    left: 50%;
  }
</style>
